<!-- FlowChart.vue -->
<template>
  <div ref="chartRef" style="width: 100%; height: 600px;" />
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      console.log(echarts, '---')

      const myChart = echarts.init(this.$refs.chartRef)

      const option = {
        tooltip: {
          formatter: function(x) {
            return x.data.label
          }
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            roam: true,
            symbolSize: 80,
            label: {
              show: true,
              formatter: '{b}'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12
            },
            data: [
              { name: '订单创建', x: 100, y: 100, label: '订单创建(0)' },
              { name: '授权书签约', x: 300, y: 100, label: '授权书签约(60)' },
              { name: '初审', x: 500, y: 100, label: '初审(66)' },
              { name: '完善资料', x: 500, y: 250, label: '完善资料(31)' },
              { name: '终审', x: 700, y: 250, label: '终审(3)' },
              { name: '电子签约', x: 900, y: 250, label: '电子签约(24)' },
              { name: 'GPS安装', x: 700, y: 400, label: 'GPS安装(201)' },
              { name: '抵押办理', x: 1100, y: 400, label: '抵押办理(22)' },
              { name: '放款', x: 900, y: 500, label: '放款(8)' },
              { name: '完成', x: 900, y: 600, label: '完成(9)' }
            ],
            links: [
              { source: '订单创建', target: '授权书签约', label: { show: true, formatter: 'pass' }},
              { source: '授权书签约', target: '初审', label: { show: true, formatter: 'pass' }},
              { source: '初审', target: '完善资料', label: { show: true, formatter: 'pass' }},
              { source: '完善资料', target: '终审', label: { show: true, formatter: 'pass' }},
              { source: '终审', target: '电子签约', label: { show: true, formatter: 'pass' }},
              { source: '电子签约', target: 'GPS安装', label: { show: true, formatter: 'pass' }},
              { source: '电子签约', target: '抵押办理', label: { show: true, formatter: 'pass' }},
              { source: 'GPS安装', target: '放款', label: { show: true, formatter: 'pass' }},
              { source: '抵押办理', target: '放款', label: { show: true, formatter: 'pass' }},
              { source: '放款', target: '完成', label: { show: true, formatter: 'pass' }}
            ],
            lineStyle: {
              color: '#aaa',
              curveness: 0.2
            }
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>
